

<header
  class="site-header flex-none"
  x-data="{
    fixed: false,
    hidden: false,
    lastPos: window.scrollY,
    scrolledPast: false
  }"
  x-ref="navbar"
  x-on:scroll.window="
    fixed = window.scrollY > lastPos ? window.scrollY >= $refs.navbar.offsetHeight : window.scrollY > 0;
    hidden = fixed && window.scrollY > lastPos;
    if (window.scrollY > $refs.navbar.offsetHeight && !scrolledPast) {
      setTimeout(() => $refs.navbar.classList.add('is-scrolled-past'), 500);
      scrolledPast = true;
    } else if (window.scrollY === 0) {
      $refs.navbar.classList.remove('is-scrolled-past');
      scrolledPast = false;
    }
    lastPos = window.scrollY;
  "
  x-bind:class="{
    'is-fixed': fixed,
    'is-hidden': hidden,
    'menu-open': navOpen
  }"
>
  <div
    class="site-header-inner h-full flex items-center gap-5"
  >
    <button x-on:click="navOpen = !navOpen" :class="{ 'active': navOpen }" class="mobile-menu-button inline-block hide-laptop">
      <span></span>
      <span></span>
      <span></span>
    </button>
    <a rel="author" href="{{ "/" | relative_url }}" class="logo block">
      <img class="logo-white" src="{{ site.baseurl }}/images/logo.svg" alt="{{site.title}} logo" />
    </a>
    <a class="desktop-github-icon ml-auto" href="https://github.com/{{site.repository}}" target="_blank">
      <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2344 0.150879C5.28641 0.150879 0.468811 4.96848 0.468811 10.9165C0.468811 15.6803 3.55046 19.7039 7.82978 21.1303C8.36806 21.2245 8.56991 20.9016 8.56991 20.619C8.56991 20.3633 8.55646 19.5155 8.55646 18.6139C5.8516 19.1118 5.15184 17.9545 4.93653 17.3489C4.81541 17.0394 4.29059 16.084 3.83306 15.8283C3.45626 15.6264 2.91798 15.1285 3.8196 15.1151C4.66739 15.1016 5.27295 15.8956 5.47481 16.2185C6.44371 17.8468 7.99126 17.3893 8.61028 17.1067C8.70448 16.4069 8.98708 15.9359 9.29659 15.6668C6.90125 15.3977 4.39825 14.4691 4.39825 10.3513C4.39825 9.18051 4.81541 8.21161 5.50172 7.45802C5.39407 7.18888 5.01727 6.08541 5.60938 4.60514C5.60938 4.60514 6.51099 4.32254 8.56991 5.70861C9.43116 5.46639 10.3462 5.34527 11.2613 5.34527C12.1764 5.34527 13.0914 5.46639 13.9527 5.70861C16.0116 4.30909 16.9132 4.60514 16.9132 4.60514C17.5053 6.08541 17.1285 7.18888 17.0209 7.45802C17.7072 8.21161 18.1244 9.16706 18.1244 10.3513C18.1244 14.4826 15.6079 15.3977 13.2126 15.6668C13.6028 16.0032 13.9392 16.6492 13.9392 17.6584C13.9392 19.0983 13.9258 20.2556 13.9258 20.619C13.9258 20.9016 14.1276 21.238 14.6659 21.1303C16.8031 20.4088 18.6602 19.0353 19.9758 17.2031C21.2915 15.3708 21.9994 13.1721 22 10.9165C22 4.96848 17.1824 0.150879 11.2344 0.150879Z" />
      </svg>
    </a>
  </div>
</header>

{%- assign url_parts = page.url | split: '/' %}
{%- assign spec_id = url_parts[1] %}
{%- assign spec_version = url_parts[2] %}
{%- assign spec = site.data.versions[spec_id] %}
{%- assign version = spec.versions[spec_version] %}
{%- if spec and version %}
  {%- if spec_version != spec.current or version.draft %}
    <input id="important-messages-checkbox" type="checkbox" hidden>
    <section class="important-messages">
      <div>
        <label for="important-messages-checkbox" title="dismiss">✕</label>
        {%- if version.draft %}
          {%- if spec_version == "draft" %}
            <p>This is a working draft. This document may be modified, replaced, or discarded at any time.</p>
          {%- else %}
            <p>This is a working draft of {{ spec_version }}. This document may be modified, replaced, or discarded at any time.</p>
          {%- endif %}
        {%- endif %}
        {%- if spec_version != spec.current %}
          {%- assign current_version = spec.versions[spec.current] %}
          {%- if current_version %}
            {%- comment %}
            Check if there is a page for the newest version. If there is link there, otherwise link to the spec version top page.
            {% endcomment %}
            {%- assign other_version = page.url | replace: spec_version, spec.current | relative_url -%}
            {%- assign other_page = site.pages | where_exp: "page", "page.url == other_version" | first -%}
            {%- if other_page %}
              {%- assign new_url = other_page.url %}
            {%- else %}
              {%- assign new_url = "/" | append: spec_id | append: "/" | append: spec.current %}
            {%- endif %}
            <p>{{ current_version.name }} is the current version. See <a href="{{ new_url }}">the {{ current_version.name }} documentation</a>.</p>
          {%- endif %}
        {%- endif %}
      </div>
    </section>
  {%- endif %}
{%- endif %}
